<template lang='pug'>
  .main
    .header-wrap
      .tool-list
        section.tool-list__lable 版本管理
        ButtonList.buttons-wrap(:buttonList="toolbarBtns")
        //- ButtonList.buttons-wrap(:buttonList="isContrast?contrastBtnList:!isAutoPlaying||!editList?buttonList:[]")
      .version-list
        SimpleStep(
          ref="simpleStep"
          v-if="actVerObj.id && !isContrast"
          v-model="historyList"
          :list="historyList"
          :initIndex="6"
          :current="actVerObj.id"
          :isRejestAutoPlay="isEditing"
          @selectStep="selectStep"
          @autoPlaying="isAutoPlaying=$event")
        .contrast-wrap(v-if="isContrast")
          label.label-tips
            p 选择两个分区版本对比
          el-checkbox-group(v-model="checkContrast" size="medium" :max="2")
            el-checkbox(v-for="list in historyList"
              :label="list.id"
              :key="list.id"
              :border="list.status === 'RELEASE' && list.enabled")
              span(:class="{'act-color': list.status === 'RELEASE'}") {{list.name}} - {{list.status|filterStatus(list.enabled)}}
    SmartDialog.dialog(v-model="showDialog" title='导入版本分区' size="md")
      .d-flex.flex-column
        label.label-tips
          p 为保证信息完整，必须上传三种格式的文件：.dbf，.shp，.shx
        SmartUpload.m-4(
          ref="smartUpload"
          resType="PRESSURE_AREA_VERSION"
          :limit="3"
          @input="importDatas")
    SmartDialog.dialog(v-model="showCloneDialog" title="设置复制版本" size="md")
      SmartForm.m-5(ref="smartForm"
        :formList="cloneFormList"
        :columns="cloneColumns"
        :formValues="{}"
        :buttonList="cloneBtnList")
    //- 地图
    .content-wrap
      .map-wrap
        MapPage(
          v-model="mapDatas"
          ref="mapPage"
          :mapDatas="!isContrast?mapDatas:contrastAreas"
          :mapMarkers="mapMarkers"
          :isEditing="isEditing"
          :version="actVerObj"
          @createPolygon="createPolygon"
          @selectPolygon="selectPolygon"
          @adjustPolygon="adjustPolygon"
          @dblClick="dblClickPolygon"
          @postDevice="postDevice")
        // 版本信息
        .map-board.version-tip(v-show="!isContrast")
          span 版本：{{actVerObj.name}}
        // 信息标注
        .map-board.map-marker-board(v-if="!isContrast")
          p 分区
          .board-wrap(v-for="(item, index) in colorTable" :key="`color${index}`")
            span.color(:style="`background: ${item.color}`")
            span {{item.name}}
        // 工具栏
        // button.btn(@click="drawPolygon")
      //- .sidebar-wrap_modal(v-if='!isContrast && toggleSlideFrame')
      .sidebar-wrap_modal(
        v-if='!isContrast && toggleSlideFrame'
        :style="{width:!isContrast && toggleSlideFrame?sliceWidth + 'px':0}")
      SlideFrame.sidebar-wrap(
        v-if="!isContrast"
        v-model="toggleSlideFrame"
        :toggleTouch="toggleSlideFrame"
        :sliceWidth="sliceWidth"
        @changeCurFrame="changeCurFrame")
        Tab(
          v-if="tabList.length"
          :isVertical="true"
          :tabList="tabList"
          :actIndex="actIndex"
          @activeIndex="getActiveIndex")
          .detail(slot="version")
            label.label-tips
              h6 基础信息
            SmartForm.smart-form(
              v-if="isEditing && canEdit"
              :labelSize="3"
              :formList="editList"
              :values="formValues"
              :columns="columns"
              :buttonList="updateButtonList"
              :formSubmitIndex="1")
            section(v-else)
              ImportantInfo.form-import-info(
                :infoList="versionList"
                :formValues="actVerObj"
                :columns="columns")
              label.label-tips(v-if="isEditing")
                h6.font-weight-bold 为什么不能编辑分区？
                p 【已发布】的版本无法编辑（包括分区、版本信息），仅可编辑分区色块
                p 如需重新使用，请【
                  a.btn-link.cursor(style="color: #007bff" @click="showCloneDialog = true") 复制
                  | 】此版本使用
                h6.font-weight-bold 为什么不能编辑设备？
                p 仅为【当前使用】的版本，才允许编辑设备
            .color-table-wrap
              AreaTable(
                :colorTable="colorTable"
                :isEditing="isEditing"
                :canEdit="canEdit"
                :selPolygonId="selPolygonId"
                @updateArea="updateArea"
                @deleteArea="deleteArea")
          AreaEdit(
            slot="area"
            :target="selPolygonId"
            :full="actVerObj.areas"
            :isEditing="isEditing"
            :columns="areaFormColumns"
            :readOnly="!canEdit || !isEditing"
            @updateArea="updateArea")
          DeviceInfo(slot="device"
            :target="selPolygonId")
          Boundary(slot="boundary"
            :version="actVerObj.id"
            :readOnly="!isEditing || !isUsing"
            :datas="mapMarkers"
            :isEditing="isEditing"
            @editDevice="postDevice")
</template>

<script>
/**
 * @name 分区管理-版本管理
 * @author linmn
 */
import SlideFrame from '@/pages/dpa/components/SlideFrame'
import ButtonList from '@/components/ButtonList'
import SimpleStep from './SimpleStep'
import MapPage from './MapPage'
import Tab from '@/components/TabPage'
import AreaTable from './AreaTable'
import ImportantInfo from '@/components/ImportantInfo'
import SmartForm from '@/components/SmartForm'
import SmartUpload from '@/components/SmartForm/SmartFormItem/SmartUpload'
import SmartDialog from '@/components/SmartDialog'
import config from '../../config/manage'
import {isObject, keyBy, cloneDeep} from 'lodash'
import {getDyncRelation, deleteWithDialog} from '../lib/index.js'

/* tab 组件 */
import AreaEdit from './tabs/AreaEdit'
import DeviceInfo from './tabs/DeviceInfo'
import Boundary from './tabs/Boundary'

export default {
  name: 'Manage',
  components: {
    SlideFrame,
    ButtonList,
    MapPage,
    SimpleStep,
    SmartForm,
    SmartUpload,
    SmartDialog,
    ImportantInfo,
    AreaTable,
    Tab,
    AreaEdit,
    DeviceInfo,
    Boundary
  },
  data () {
    const versionList = ['name', 'status', 'enabled', 'createUserId', 'createTime', 'updateUserId', 'updateTime', 'remark']
    versionList.map(key => {
      config.columns[key].columnSize = [{ type: 'md', size: '12' },
        { type: 'sm', size: '12' }]
    })
    return {
      toggleSlideFrame: false,
      isTouch: false, // 控制右边栏遮罩层
      isEditing: false, // 当前是否为编辑状态
      isNewArea: false, // 是否为新建区域
      showDialog: false, // 是否显示弹窗
      // autoPlay: false, // 自动播放版本
      isContrast: false, // 是否对比
      showCloneDialog: false, // 显示复制的表单弹窗
      isAutoPlaying: false, // 是否自动播放
      checkContrast: [], // 选择对比的版本
      contrastAreas: [], // 对比的区域
      cloneFormList: ['name'],
      cloneColumns: {
        name: {
          label: '新版本名称',
          form: {
            type: 'input',
            rules: [{
              type: 'required',
              message: '请填新版本名称'
            }]
          }
        }
      },
      cloneBtnList: [{
        label: '确定',
        validate: true,
        type: 'complete',
        func: ({funcProps}) => {
          const {form} = funcProps
          this.cloneVersion(form.formValues)
        }
      }],
      /* 历史版本列表 */
      historyList: [],
      loadStep: true,
      /* 按钮组 - 版本工具 */
      buttonList: {
        clone: {
          label: '复制',
          name: 'clone',
          func: () => {
            this.showCloneDialog = true
          }
        },
        edit: {
          label: '编辑',
          name: 'edit',
          func: ({funcProps}) => {
            const {button} = funcProps
            this.isEditing = !this.isEditing
            button.btnType = this.isEditing ? 'success' : 'default'
            button.btnLabel = this.isEditing ? '取消编辑' : '编辑'
            this.toggleSlideFrame = true
            if (!this.isEditing) this.cancelEdit()
          }
        },
        import: {
          label: '导入',
          name: 'import',
          func: () => {
            this.showDialog = true
            this.$refs.smartUpload.$refs.uploadForm.reset()
            this.$refs.smartUpload.fileList = []
          }
        },
        complete: {
          label: '对比',
          name: 'complete',
          func: ({funcProps}) => {
            this.isContrast = true
          }
        },
        cancelComplete: {
          label: '退出对比',
          type: 'complete',
          name: 'cancelComplete',
          func: () => {
            this.isContrast = false
          }
        },
        cancleClone: {
          label: '取消编辑',
          type: 'complete',
          func: () => {
            this.isEditing = !this.isEditing
            this.cancelEdit()
          }
        }
      },
      initToolbar: ['clone', 'edit', 'import', 'complete'],
      // contrastBtnList: [{
      //   label: '退出对比',
      //   type: 'complete',
      //   func: () => {
      //     this.isContrast = false
      //   }
      // }],
      /* 按钮组 - 编辑表单 */
      updateButtonList: [{
        label: '保存',
        icon: 'save',
        type: 'complete',
        validate: true,
        func: ({funcProps}) => this.updateVersion(funcProps)
      }, {
        label: '发布',
        icon: '',
        type: 'success',
        validate: true,
        func: ({funcProps}) => this.publishVersion(funcProps)
      }, {
        label: '删除',
        icon: '',
        func: ({funcProps}) => this.deleteVersion(funcProps)
      }],
      /* 按钮组 - 新增表单 */
      createButtonList: [{
        label: '新增',
        icon: 'save',
        type: 'complete',
        func: ({funcProps}) => {}
      }],
      /* 版本重要信息 */
      tempActObj: {}, // 记录当前活动的版本temp
      formValues: {},
      versionList: versionList,
      editList: ['name', 'status', 'remark'],
      columns: config.columns,
      selPolygonId: null, // 被选择的分区
      mapMarkers: [], // 坐标点
      sliceWidth: null, // 右拉宽度
      actIndex: 0,
      // 区域信息编辑
      areaFormColumns: config.areaFormColumns
    }
  },
  filters: {
    filterStatus (status, enabled) {
      return status === 'RELEASE'
        ? enabled ? '当前版本' : '已发布'
        : '草稿'
    }
  },
  computed: {
    actVerObj: {
      get () {
        return this.tempActObj
      },
      set (val) {
        this.formValues = val
        this.tempActObj = val
      }
    },
    /* 色块信息 */
    colorTable () {
      const _color = this.isContrast ? this.contrastAreas : this.actVerObj.areas
      return _color || []
    },
    /* 地图信息 */
    mapDatas () {
      if (!this.actVerObj.areas || !this.actVerObj.areas.length) return []
      return this.actVerObj.areas.map(area => {
        return {
          ...area,
          path: area.ranges,
          strokeColor: area.color,
          strokeOpacity: 0.4,
          fillColor: area.color
        }
      })
    },
    /* 记录状态不为发布的版本 - 可编辑版本信息 */
    canEdit () {
      return this.actVerObj.status !== 'RELEASE'
    },
    /* 记录状态当前使用的版本 */
    isUsing () {
      return this.actVerObj.status === 'RELEASE' && this.actVerObj.enabled
    },
    /* tab信息 */
    tabList () {
      const canShow = Boolean(this.selPolygonId)
      return [{
        label: '版本信息',
        name: 'version'
      }, {
        label: '分区信息',
        name: 'area',
        isHide: !canShow
      }, {
        label: '设备信息',
        name: 'device',
        isHide: !canShow
      }, {
        label: '边界设备',
        name: 'boundary'
      }]
    },
    /* buttonList 操作栏 */
    toolbarBtns () {
      const list = this.isContrast ? ['cancelComplete']
        : this.isAutoPlaying ? []
          : this.isEditing ? ['cancleClone']
            : this.initToolbar
      return list.map(key => this.buttonList[key])
    }
  },
  watch: {
    checkContrast (list) {
      this.setContrastAreas()
    }
  },
  mounted () {
    this.initAll()
    this.getRelation()
    this.getVersionList()
  },
  methods: {
    /* 指定重置 */
    initAll () {
      this.$set(this, 'actIndex', 0) // tab
      this.selPolygonId = null // 选区
    },
    getActiveIndex (index) {
      console.log('getActive', index)
      this.$set(this, 'actIndex', index)
      // this.actIndex = index
      this.sliceWidth = this.selPolygonId && index === 2 ? 650 : 360
    },
    /* 设置对比区域 */
    setContrastAreas () {
      const historyList = cloneDeep(this.historyList)
      const historys = keyBy(historyList, 'id')
      let areas = []
      this.checkContrast.map((item, index) => {
        const n = historys[item].areas.map(cell => {
          return {
            ...cell,
            path: cell.ranges,
            strokeColor: cell.color,
            strokeOpacity: 0.4,
            fillColor: index ? this.RGBToGary(cell.color) : cell.color,
            strokeStyle: index ? 'dashed' : 'solid',
            name: `${historys[item].name}_${cell.name}`
            // version: historys[item].name
          }
        })
        areas = [...areas, ...n]
      })
      this.contrastAreas = areas
    },
    /* 修改颜色灰度 */
    RGBToGary (color) {
      const rgb = this.colorToRGB(color).split('(')[1].replace(')', '').split(',')
      const gary = (rgb[0] * 30 + rgb[1] * 59 + rgb[2] * 11 + 50) / 100
      return gary
    },
    colorToRGB (color) {
      let sColor = color.toLowerCase()
      const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
      if (sColor && reg.test(sColor)) {
        if (sColor.length === 4) {
          var sColorNew = '#'
          for (let i = 1; i < 4; i += 1) {
            sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
          }
          sColor = sColorNew
        }
        // 处理六位的颜色值
        var sColorChange = []
        for (let i = 1; i < 7; i += 2) {
          sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
        }
        return 'RGB(' + sColorChange.join(',') + ')'
      }
      return sColor
    },
    getRelation () {
      const {columns} = getDyncRelation({target: this, columns: config.columns})
      const {columns: areaFormColumns} = getDyncRelation({target: this, columns: config.areaFormColumns})
      this.columns = columns
      this.areaFormColumns = areaFormColumns
    },
    /* 切换右侧栏 */
    changeCurFrame (val) {
      this.toggleSlideFrame = Boolean(val)
    },
    /* 获取版本信息列表 /pn/dpa/pressureAreaVersion */
    getVersionList (target) {
      this.$refs.mapPage.loading = true
      this.$get({
        url: '/pn/dpa/pressureAreaVersion',
        params: {
          orderBy: 'createTime|asc',
          pageSize: 9999,
          pageIndex: 1
        }
      }).then(res => {
        this.$refs.mapPage.loading = false
        if (!res) return
        this.historyList = res.data
        // 默认取当前启用 = 当前活动
        this.actVerObj = this.renderActVersion({target: target, all: res.data})
        this.formValues = this.actVerObj
        this.getVerDetail(this.actVerObj.id)
      })
    },
    /* 渲染当前活动版本 */
    renderActVersion ({target = 'default', all = []}) {
      const targetItem = {
        'default': all.find(data => data.enabled),
        'last': all[all.length - 1]
      }
      return targetItem[target]
    },
    /* 获取版本详情 */
    getVerDetail (id) {
      this.$refs.mapPage.loading = true
      this.loadStep = false
      this.$get({
        url: `/pn/dpa/pressureAreaVersion/${id}`
      }).then(res => {
        this.$refs.mapPage.loading = false
        this.loadStep = true
        if (!res) return
        this.actVerObj = res
        this.getDeviceList(id)
      })
    },
    /* 绘制新区域 */
    createPolygon (lnglat) {
      // 创建新的区域对象
      this.$post({
        url: `/pn/dpa/pressureArea/ranges`,
        data: {
          versionId: this.actVerObj.id,
          rangePoints: lnglat
        }
      }).then(res => {
        if (!res) return
        // this.isNewArea = true
        this.toggleSlideFrame = true
        this.isEditing = true
        this.$set(this.actVerObj, 'areas', [...this.actVerObj.areas, {
          areaCenter: res.areaCenter,
          ranges: lnglat,
          name: '新区域',
          color: '#bad7f5',
          id: res.id,
          noRemoteLargeMeterWaterRate: 0,
          noRemoteHouseholdMeterWaterRate: 0,
          noRemoteWaterCalcBase: 'PRESSURE_AREA'
        }])
        // this.selectPolygon(res.id)
        this.selPolygonId = res.id
        this.getActiveIndex(2) // 切换到设备的tab
        // this.createArea(lnglat, res.areaCenter) // 不开，会重复创建
      })
    },
    /* 新增区域 - 颜色 + 名称 */
    createArea (lnglat = [], center) {
      // console.log('lnglat-', lnglat)
      if (isObject(lnglat)) {
        lnglat.map(res => {
          return res
        })
      }
      this.$post({
        url: '/pn/dpa/pressureArea',
        data: {
          name: '新区域',
          color: '#bad7f5',
          versionId: this.actVerObj.id
        }
      }).then(res => {
        if (!res.id) return
        this.$set(this.actVerObj, 'areas', [...this.actVerObj.areas, {
          areaCenter: center,
          ranges: lnglat,
          name: '新区域',
          color: '#bad7f5',
          id: res.id,
          noRemoteLargeMeterWaterRate: 0,
          noRemoteHouseholdMeterWaterRate: 0,
          noRemoteWaterCalcBase: 'PRESSURE_AREA'
        }])
        // console.info('create-ok-', res)
      })
    },
    /* 修改区域 /pn/dpa/pressureArea/{id:\d+} */
    updateArea (obj) {
      this.$patch({
        url: `/pn/dpa/pressureArea/${obj.id}`,
        data: obj
      }).then(res => {
        if (!res) return
        this.$message.success('保存成功')
        const target = this.actVerObj.areas.findIndex(key => key.id === obj.id)
        this.$set(this.actVerObj.areas, target, obj)
      })
    },
    /* 删除区域 */
    deleteArea (obj) {
      if (!obj.id) {
        this.$message.error('无法删除')
        return
      }
      deleteWithDialog(this, {
        url: '/pn/dpa/pressureArea/',
        id: obj.id,
        mesg: `【${obj.name}】分区`
      }).then(data => {
        const _index = this.actVerObj.areas.findIndex(area => area.id === obj.id)
        this.$delete(this.actVerObj.areas, _index)
        // console.log('this.mapData', this.mapDatas)
      })
    },
    /* 双击区域 */
    dblClickPolygon (data) {
      console.log('双击区域：：：', data)
    },
    /* 渲染区域 */
    renderArea () {},
    /* 切换版本 */
    selectStep (step) {
      // this.isEditing = false
      this.initAll()
      this.getVerDetail(step.id)
    },
    /* 新增版本 */
    createVersion ({form}) {
    },
    /* 编辑版本 */
    updateVersion ({form}) {
      this.$patch({
        url: `/pn/dpa/pressureAreaVersion/${this.actVerObj.id}`,
        data: form.formValues
      }).then(res => {
        if (!res) return
        this.$message.success('保存成功')
        // this.getVersionList()
        const _index = this.historyList.findIndex(list => list.id === res.id)
        if (_index !== -1) {
          this.$set(this.historyList, _index, {...this.historyList[_index], ...form.formValues})
        }
        this.getVerDetail(this.actVerObj.id)
      })
    },
    /* 删除版本 */
    deleteVersion ({form}) {
      const {formValues} = form
      deleteWithDialog(this, {
        url: '/pn/dpa/pressureAreaVersion/',
        id: formValues.id,
        mesg: `【${formValues.name}】版本`
      }).then(data => {
        if (!data) return
        const _index = this.historyList.findIndex(list => list.id === formValues.id)
        const refs = this.$refs.simpleStep
        const current = refs.actIndex
        this.$delete(this.historyList, _index)
        setTimeout(() => {
          refs.selectStep(refs.sliceStep[current])
        }, 100)
      })
    },
    /* 发布版本 */
    publishVersion ({form}) {
      this.$put({
        url: `/pn/dpa/pressureAreaVersion/release/${this.actVerObj.id}`,
        data: form.formValues
      }).then(res => {
        if (!res) return
        this.$message.success('发布成功')
        this.getVersionList()
      })
    },
    /* 取消编辑 */
    cancelEdit () {
      this.isEditing = false
      this.toggleSlideFrame = false
      this.getVerDetail(this.actVerObj.id)
    },
    /* 复制版本： 复制+新增 */
    cloneVersion ({name}) {
      this.$post({
        url: `/pn/dpa/pressureAreaVersion/copy/${this.actVerObj.id}`,
        data: {
          name: name
        }
      }).then((datas) => {
        if (!datas.id) return
        const newDatas = {
          areas: this.actVerObj.areas,
          remark: this.actVerObj.remark,
          status: 'DRAFF',
          ecabled: false,
          name: name,
          id: datas.id
        }
        this.$refs.smartForm.formValues = {}
        this.showCloneDialog = false
        this.historyList.push(newDatas)
        this.actVerObj = newDatas
        this.$nextTick(() => {
          this.$refs.simpleStep.turnToLastStep()
        })
      })
    },
    /* 选择区域 */
    selectPolygon (id) {
      if (!id) {
        this.initAll()
        return
      }
      this.selPolygonId = id
    },
    /* 调整区域范围 */
    adjustPolygon (paths, area) {
      this.$put({
        url: `/pn/dpa/pressureArea/${area.id}/ranges`,
        data: {
          rangePoints: paths
        }
      }).then(res => {
        if (!res) return
        this.$message.success('调整成功')
        let mapObj = keyBy(this.actVerObj.areas, 'id')
        if (mapObj[area.id]) {
          this.$set(mapObj[area.id], 'areaCenter', res.areaCenter)
        }
      })
    },
    /* 查看草稿历史 */
    showPaperList () {},
    /* 导入数据 */
    importDatas (datas) {
      const lens = datas ? datas.length : 0
      if (lens) {
        this.$message.success('导入成功')
        this.getVersionList('last')
      }
      // 【post】 /pn/dpa/pressureAreaVersion/import
    },
    /* 获取边界列表 */
    getDeviceList (id) {
      this.$get({
        url: `/pn/dpa/pressureAreaVersion/${id}/boundarySite`
      }).then((data) => {
        if (!data) return
        this.mapMarkers = data.data
      })
    },
    /* 修改设备 */
    postDevice (formValues) {
      if (!formValues.id) return
      this.$post({
        url: `/pn/dpa/pressureAreaVersion/${this.actVerObj.id}/boundarySite`,
        data: {
          ...formValues,
          versionId: this.actVerObj.id,
          siteId: formValues.id
        }
      }).then(datas => {
        if (!datas) return
        this.$message.success('提交成功')
        this.getDeviceList(this.actVerObj.id)
      })
    }
  }
}
</script>

<style lang='sass' scoped>
@import '../../assets/custom.sass'
$act-col: #5EACF8
.main
  height: 100%
  display: flex
  flex: 1
  flex-direction: column
/* header start */
.header-wrap
  // line-height: 80px
  padding: 10px
  display: flex
  align-items: center
  justify-content: space-between
  background: #fff
  border-bottom: 1px solid rgba(230, 230, 230, .77)
  .tool-list__lable
    line-height: 26px
    font-weight: 600
  .version-list
    min-width: 606px
    max-width: 80%
  &> div:not(:last-child)
    margin-right: 20px
  .buttons-wrap
    position: relative
    // float: right
    // margin-left: 10px
    &>:after
      clear: both
/* content start */
.content-wrap
  display: flex
  flex: 1
  width: 100%
  overflow: hidden
  .sidebar-wrap_modal
    width: 365px
    background: #fcf9f2
    transition-delay: 0.2s
  .sidebar-wrap
    box-shadow: 0px 1px 1px rgba(230, 230, 230, .77)
    .form-import-info.important-wrap
      border: 0
      /deep/
        .important-label
          min-width: 100px
          display: inline-block
          text-align: right
          margin-right: 15px
    .smart-form
      padding: 20px 10px 0  0
  .map-wrap
    height: 100%
    flex: 1
    position: relative
  .map-board
    background: #fff
    color: #626262
    position: absolute
    border: 1px solid #d4d4d4
    border-radius: 4px
    box-shadow: 1px 1px 10px 0 #ccc
    padding: 15px
  .version-tip
    left: 10px
    top: 20px
    font-weight: 600
    font-size: 16px
  .map-marker-board
    left: 10px
    bottom: 30px
    font-size: 12px
    p
      border-bottom: 1px solid #dfdfdf
    .board-wrap
      padding: 0 10px
      .color
        display: inline-block
        width: 30px
        height: 12px
        margin-right: 10px
        vertical-align: middle
        border: 1px solid #dfdfdf
.contrast-wrap
  width: 100%
  background: #f5f7fa
  z-index: 9
  // box-shadow: 0 0 10px #dfdfdf
  padding: 0 20px 5px
  display: flex
  // flex-direction: column
  align-items: center
  .label-tips
    width: auto
    margin: 0
  .el-checkbox
    padding: 0 10px
    margin: 0
  .act-color
    color: $act-col
</style>
